<template>

  <view class="">



    <!-- 购物车 -->
    <view style="  padding-left: 10px;background-color: white;padding-top: 20px;">





      <view class="" style="padding-bottom: 30px;">
        <text style="font-weight: bold;font-size: 16px;">苍穹餐厅</text>
      </view>



      <scroll-view scroll-y :style="{height: wh + 'px'}" :scroll-top="scrollTop">

        <view class="" v-for="(item,index) in cartdata" :key="item.id">
          <view class="" style="display: flex;justify-content: space-between;padding-bottom: 20px;">
            <view class="">
              <image style="width: 50px;height: 50px;" :src="item.image" mode=""></image>
            </view>

            <view class="" style="text-align: left;position:absolute;margin-left: 20%;">
              <view style="padding-bottom: 5px;">{{item.name}}</view>
              <view style="font-size: 12px;color: #b6b6b6;padding-bottom: 5px;">{{item.dishFlavor}}</view>
              <view style="font-size: 12px;color: #b6b6b6;">x {{item.number}}</view>
            </view>

            <view class="" style="position:absolute;margin-left: 80%;">￥{{item.amount}}</view>
          </view>
        </view>


      </scroll-view>
      <view v-if="scrollTop===0" class="" style="text-align: center;padding-top: 10px;" @click="setwh">

        <text style="font-size: 14px;color: #ccc;">展开加载更多</text>


        <uni-icons color="#b5b5b5" type="down" size="13" style=""></uni-icons>
      </view>

      <view v-else class="" style="text-align: center;padding-top: 10px;" @click="setwh">

        <text style="font-size: 14px;color: #ccc;">已加载完毕</text>

      </view>

      <view class="" style="justify-content: center;padding-top: 10px;">
        <view class=""
          style="display: flex;overflow: hidden;text-overflow: ellipsis; white-space: nowrap; padding-bottom: 20px;  ">
          <text>打包费</text>
          <text style="margin-left: 68%;">￥{{pack_fee}}</text>
        </view>

        <view class=""
          style="display: flex;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;padding-bottom: 20px; ">
          <text>配送费</text>
          <text style="margin-left: 68%;">￥{{delivery_charge}}</text>
        </view>

        <view class="" style="margin-left: 65%;">
          <text style="font-size: 12px;">合计:</text>
          <text style="font-weight: bold;">￥{{sumCount}}</text>
        </view>
      </view>

      <!-- 备注 -->
      <view class="" style="display: flex;justify-content: space-between;padding-top: 20px;">
        <text style="font-weight: bold;font-size: 12px;color:#b5b5b5;width: 30px;">备注</text>

        <view class="" style="display: flex;width: 140px;text-align: right">
          <input style="font-size: 12px;width: 110px;" type="text" v-model="remark" placeholder="推荐使用无接触配送" clear
            clearable />
          <uni-icons color="#b5b5b5" type="right" size="13"></uni-icons>
        </view>
        <!-- <text style=" color: #b5b5b5;font-size: 12px;">推荐使用无接触配送 </text> -->

      </view>

      <!-- 餐具数量-->

      <view class="" style="display: flex;justify-content: space-between;padding-top: 20px;">
        <text style="font-weight: bold;font-size: 12px;color:#b5b5b5;width: 80px;">餐具数量</text>

        <view v-if="tableware===''" class="" style="display: flex;width: 70px;" @click="tablewarehandel">
          <input style="font-size: 12px;width: 38px;" type="" v-model="tableware" placeholder="请选择" clear clearable />
          <uni-icons color="#b5b5b5" type="right" size="13"></uni-icons>

        </view>

        <view v-else class="" style="display: flex;width: 80px;" @click="tablewarehandel">
          <view class="" style="position: left;margin-left: -30%;text-align: right;">
            <input style="font-size: 12px;color: #ff5500;" type="" v-model="tableware" placeholder="请选择" clear
              clearable />
          </view>
          <view class="" style="position: right;width: 50px;">
            <uni-icons color="#b5b5b5" type="right" size="13"></uni-icons>
          </view>


        </view>

      </view>

      <!-- 发票-->
      <view class="" style="display: flex;justify-content: space-between;padding-top: 20px;">
        <text style="font-weight: bold;font-size: 12px;color:#b5b5b5">发票</text>


        <view class="" style="width: 100px;">
          <text style=" color: #b5b5b5;font-size: 12px;">请联系商家提供</text>
        </view>
      </view>

      <!-- 支付按钮-->

      <view v-if="Total" class="footer_header1" style="">

        <view class="footer_order_bottom1 " style="width: 90%;">
          <view class="">
            <image style="width: 50px;height: 60px;margin-top: -12%;z-index: 9999;position: absolute;"
              src="@/static/btn_waiter_sel.png" mode="">

            </image>
            <view class="" style="margin-left:38px;margin-top:-30px;">
              <span class="circle">{{Total}}</span>
            </view>
          </view>

          <view class="price1" style="width: 50px;">
            <span style=" color: white;margin-left: -60px;">￥{{sumCount}}</span>
          </view>
          <view @click="gopay" class="footer_order_btn1" style="">
            <button class="footer_orde_btn_sumbit1">去支付</button>
          </view>
        </view>

      </view>






      <!-- 选择餐具弹窗-->
      <view class="">
        <uni-popup ref="tablewares" type="popup">
          <view class=""
            style="z-index: 999;background-color: #e8e8e8; padding-top: 20px;padding-bottom: 10px;border-radius: 10px;padding-left: 10px;border-bottom-left-radius: 0;border-bottom-right-radius: 0;">

            <uni-icons type="location" size="14"></uni-icons>
            <text
              style="font-size: 14px;color: #acacac;">{{addressdata.provinceName}}{{addressdata.cityName}}{{addressdata.districtName}}{{addressdata.detail}}</text>
            <view class="" style="font-size: 12px;color: #b5b5b5;padding-left: 20px;padding-bottom: 10px;">
              <text style="padding-right: 5px;">{{addressdata.consignee}}</text>
              <text style="padding-right: 5px;">{{addressdata.sex==='1'?'男':'女'}}</text>
              <text>{{addressdata.phone}}</text>
            </view>

            <view class=""
              style="background-color: white;width: 96%;padding-top: 10px;padding-left: 2%;font-size: 14px;border-radius: 10px;padding-bottom: 10px;">

              <view class="" style="padding-bottom: 10px;">
                <text style="font-weight: bold;">当前地址下单，是否需要餐具？</text>
              </view>

              <view class="" style="display: flex;">
                <view :class="isyes===1?'active':'selecttableware1'" @click="isYes1">
                  <text>需要餐具</text>
                </view>

                <view :class="isyes===2?'active':'selecttableware2'" style="" @click="isYes2">
                  <text>无需餐具</text>
                </view>


              </view>

              <view v-show="isyes===1" style="padding-top: 10px;">
                <view class="" style="padding-bottom: 10px;">
                  <text style="font-weight: bold;">选择餐具数量</text>
                </view>



                <view class="" style="display: flex;">
                  <view :class="isnumber===1?'.number1_active':'num1'" @click="isYes3" style="">
                    <text>商家按餐量提供</text>
                  </view>


                  <view :class="isnumber===2?'.number2_active':'num2'" @click="isYes4" style="">
                    <text @click="subhandel" style="width: 20px;font-size: 12px;font-weight: bold;">-</text>
                    <text>{{number}}份</text>
                    <text @click="addhandel" style="width: 20px;font-size: 12px;font-weight: bold;">+</text>
                  </view>
                </view>


              </view>
            </view>
            <!-- 保存按钮-->
            <view class="" style="margin-left: -6px;padding-top: 10px;">
              <button @click="save"
                style="background-color: #facb47;width: 98%;  height: 42px;border-radius: 10px;"><text
                  style="font-size: 14px;font-weight: bold;">保存</text></button>
            </view>

          </view>





        </uni-popup>
      </view>



    </view>






  </view>
</template>

<script>
  import
  EventBus
  from '@/utils/EventBus';

  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  import {
    setdefault
  } from '@/api/address.js'

  import {
    submitOrder
  } from '@/api/order.js'

  import moment from '@/utils/moment';

  export default {
    //  name:"my-getshopcart",
    data() {
      return {

        wh: 0,
        scrollTop: 0,
        cartdata: '',

        remark: '', //备注
        tableware: '', //餐具
        pack_fee: 2.31, //打包费
        delivery_charge: 2.2, //派送费
        sumCount: 0, //总金额
        addressId: '', //默认收货地址id
        time: '', //立即送出时间
        appointment_time: '', //预约送出时间
        addressdata: '', //默认收货地址信息
        isyes: 0, //是否选择餐具
        isnumber: 0, //是否自己选择餐具数量
        number: 1, //餐具数量
        orderdata: ''
      };
    },
    computed: {
      // 将 m_cart 模块中的 cart 数组映射到当前页面中使用

      ...mapGetters('m_cart', ['Total', 'checkedGoodsAmount']),
    },
    created() {
      const sysInfo = uni.getWindowInfo()
      this.wh = sysInfo.windowHeight / 4
      let array = uni.getStorageSync('cart')
      this.cartdata = JSON.parse(array);
      this.sumCount = (parseFloat(this.checkedGoodsAmount) + this.pack_fee + this.delivery_charge)
      this.sumCount = this.sumCount.toFixed(2)


      EventBus.$on('someEvent', (addressdata, time, appointment_time) => {
        this.addressId = addressdata.id
        this.time = time
        this.appointment_time = appointment_time
        this.addressdata = addressdata
        //  console.log(addressdata.addressId, time, appointment_time) // 输出：Hello from another component!
      })


    },


    beforeDestroy() {
      EventBus.$off('someEvent')
    },

    methods: {
      async gopay() {
        const deliveryStatus = this.appointment_time === '' ? 0 : 1
        const estimatedDeliveryTime = this.appointment_time === '' ? this.time : this.appointment_time


        // 获取当前日期
        const currentDate = new Date();
        //  console.log(currentDate, "currentDate")
        const timeParts = estimatedDeliveryTime.split(":");
        const hours = parseInt(timeParts[0]);
        const minutes = parseInt(timeParts[1]);
        // 检查小时是否小于当前小时，如果是，则日期加一天
        if (hours < currentDate.getHours()) {
          currentDate.setDate(currentDate.getDate() + 1);
        }
        // 设置时间部分到当前日期
        currentDate.setHours(hours);
        currentDate.setMinutes(minutes);

        // currentDate 现在包含了日期和时间信息

        const localDateTime = moment(currentDate).local().format('YYYY-MM-DDTHH:mm:ss');
        console.log(localDateTime, "localDateTime");



        //确定餐具数量状态
        const tablewareStatus = this.isnumber === 1 ? 1 : 0
        //确定是否需要餐具
        if (this.isnumber === 1 && this.isyes === 1) {
          this.num = Math.floor(this.Total / 3)
        } else if (this.isyes === 2) {
          this.num = 0
        }
        if (this.isnumber === 2 && this.isyes === 1) {
          this.num = this.number
        } else {
          this.num = 0
        }

        /* if (this.addressId) {
            uni.showToast("请先添加默认收货地址")
            return
          } */

        //构建提交的对象数据
        const order = {
          addressBookId: parseInt(this.addressId), //默认收货地址id
          amount: this.sumCount, //订单总金额
          deliveryStatus: deliveryStatus, //配送状态
          estimatedDeliveryTime: localDateTime, //预计送达时间
          packAmount: this.pack_fee, //打包费
          payMethod: 1, //1微信支付  2.支付宝支付
          remark: this.remark, //备注
          tablewareNumber: this.num, //餐具数量
          tablewareStatus: tablewareStatus //餐具状态
        }
        //提交订单
        //  console.log(order, 'order')
        const res = await submitOrder(order)
        console.log(res, 'res')
        this.orderdata = res.data


        //跳转到付款页面
        uni.navigateTo({
          url: '/subpkg/pay/pay?orderdata=' + JSON.stringify(this.orderdata)
        })
      },


      setwh() {
        if (this.scrollTop === 0) {
          this.wh = this.wh + (this.cartdata.length - 2) * 50
          this.scrollTop = 1
        }

      },
      //选择餐具
      tablewarehandel() {
        this.$refs.tablewares.open("bottom")
      },
      isYes1() {
        this.isyes = 1
        this.isnumber = 1
      },
      isYes2() {
        this.isyes = 2
      },
      isYes3() {
        this.isnumber = 1
      },
      isYes4() {
        this.isnumber = 2

      },
      subhandel() {
        this.number = this.number > 1 ? this.number - 1 : this.number
      },
      addhandel() {
        this.number += 1
      },
      save() {
        if (this.isyes === 2) {
          this.tableware = "已选无需餐具"
        }
        if (this.isyes === 1 && this.isnumber === 1) {
          this.tableware = "按餐量提供"
        }
        if (this.isyes === 1 && this.isnumber === 2) {
          this.tableware = this.number + '份'
        }
        this.$refs.tablewares.close("bottom")
      }
    }
  }
</script>

<style lang="scss" scoped>
  // 修改点击时的样式
  .button-hover {
    // color: #F85959;

    background-color: #e2e2e2;
  }

  // 最下面


  .footer_order_bottom {
    display: flex;
    justify-items: center;
    align-items: center;
    width: 90%;
    z-index: 99;
    position: absolute;
    display: flex;
    background-color: #2c2c2c;

    border-radius: 10px;
    padding-left: 20px;
    color: white;

  }

  .footer_orde_btn_sumbit {
    background-color: #2c2c2c;

    border: 1px solid #b4b4b4;


    border-right: 0;
    border-top: 0;
    border-bottom: 0;
    border-radius: 10px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

  }

  .price {
    padding-left: 10px;
  }




  .footer_order_bottom1 {
    display: flex;
    justify-items: center;
    align-items: center;

    z-index: 99;
    position: absolute;
    display: flex;
    background-color: #2c2c2c;

    border-radius: 20px;
    padding-left: 20px;
    color: white;

  }

  .footer_orde_btn_sumbit1 {
    //
    border: none;
    height: 38px;
    width: 100px;
    line-height: 35px;
    border-radius: 20px;
    background-color: #facb47;
  }

  .footer_order_btn1 {
    padding-top: 2px;
    padding-left: 20%;
    height: 40px;
    width: 100px;


  }

  .price1 {
    padding-left: 20%;
  }

  // 红心圆圈
  .circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    line-height: 20px;
    /* 圆形 */
    color: white;
    text-align: center;

    /* 使数字垂直居中 */
    font-size: 14px;

  }

  .active {
    color: #ff5500;
    background-color: #f1ebc9;
    height: 50px;
    width: 150px;

    margin-right: 20px;
    text-align: center;
    font-size: 14px;
    border-radius: 5px;
    margin-right: 20px;
    text-align: center;
    margin-left: 10px;
    line-height: 50px;
    border: 1px solid #ff5500;
  }

  .selecttableware1 {
    height: 50px;
    width: 150px;
    background-color: #f8f8f8;
    margin-right: 20px;
    text-align: center;
    font-size: 14px;
    border-radius: 5px;
    margin-left: 10px;
    line-height: 50px;
    border: 1px solid #f8f8f8;

  }

  .selecttableware2 {
    height: 50px;
    width: 150px;
    background-color: #f8f8f8;
    margin-right: 20px;
    text-align: center;
    font-size: 14px;
    border-radius: 5px;
    margin-left: 10px;
    line-height: 50px;
    border: 1px solid #f8f8f8;
  }

  .number1_active {
    padding-top: 5px;
    font-size: 12px;
    margin-left: 10px;
    width: 140px;
    height: 20px;
    text-align: center;
    margin-right: 20px;
    color: #ff5500;
    background-color: #f1ebc9;
    border: 1px solid #ff5500;
  }

  .num1 {
    padding-top: 5px;
    font-size: 12px;
    margin-left: 10px;
    width: 140px;
    height: 20px;
    text-align: center;
    margin-right: 20px;
    border: 1px solid #e2e2e2;
  }

  .num2 {
    padding-top: 5px;
    font-size: 12px;
    margin-left: 10px;
    border: 1px solid #e2e2e2;
    width: 140px;
    height: 20px;
    text-align: center;
    display: flex;
    justify-content: space-between;
  }

  .number2_active {
    padding-top: 5px;
    font-size: 12px;
    margin-left: 10px;

    width: 140px;
    height: 20px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    color: #ff5500;
    background-color: #f1ebc9;
    border: 1px solid #ff5500;
  }
</style>